<template>
	<view>
		<view class="top">
			<image class="title_ico" src="../../static/images/forget_title.png" @click="goBack"/>
			<view class="title_text">忘记密码</view>
		</view>
		<view class="form">
			<form @submit="submit">
				<view class="form_content" v-bind:class="[focus == 1 ? 'hover' : '']">
					<view class="area">+86</view>
					<image class="phone_ico" src="../../static/images/forget_phone.png" />
					<image class="area_line" src="../../static/images/login_line.png" />
					<input @input="phone_change" :value="userPhone" @focus="input_focus(1)" class="input_phone" name="userPhone" placeholder="请输入手机号" placeholder-class="placeholder" maxlength="11"/>
				</view>
				<view class="form_content" v-bind:class="[focus == 2 ? 'hover' : '']">
					<view class="form_name">验证码</view>
					<input @focus="input_focus(2)" class="form_input" name="verificationCode" placeholder="请输入验证码" placeholder-class="placeholder"
					 style="width: 260rpx;" />
					<image class="area_line" src="../../static/images/login_line.png" />
					<view class="code" v-if="time_show == -1" @click="get_code()">获取验证码</view>
					<view class="code" v-else-if="time_show == 0" @click="get_code()">重新发送</view>
					<view class="code" v-else-if="time_show > 0">等待{{time_show}}秒</view>
				</view>
				<view class="form_content" v-bind:class="[focus == 3 ? 'hover' : '']">
					<view class="form_name">新密码</view>
					<input @focus="input_focus(3)" :type="show_type == 1 ? 'text' : 'password'" class="form_input" name="userPassword"
					 placeholder="请输入新密码" placeholder-class="placeholder" />
					<image v-if="show_type == 1" class="form_image" src="../../static/images/login_show.png" @click="show_status()" />
					<image v-else class="form_image" src="../../static/images/login_hide.png" @click="show_status()" />
				</view>
				<view class="form_content" v-bind:class="[focus == 4 ? 'hover' : '']">
					<view class="form_name">确认密码</view>
					<input @focus="input_focus(4)" :type="show_type == 1 ? 'text' : 'password'" class="form_input" name="userPasswordAgain"
					 placeholder="请确认新密码" placeholder-class="placeholder" />
					<image v-if="show_type == 1" class="form_image" src="../../static/images/login_show.png" @click="show_status()" />
					<image v-else class="form_image" src="../../static/images/login_hide.png" @click="show_status()" />
				</view>
				<button form-type="submit" class="submit">确认修改</button>
			</form>
		</view>
	</view>
</template>

<script>
	import {
		getVerificationCode,
		resetPassword
	} from "@/service/api/api";
	export default {
		data() {
			return {
				focus: 0,
				show_type: 0,
				time_count_down: '',
				time_show: -1,
				userPhone: ''
			}
		},
		created() {

		},
		beforeDestroy() {
			clearInterval(this.time_count_down)
			this.time_count_down = ''
		},
		methods: {
			submit(e) {
				if (!this.check_phone(e.detail.value['userPhone'])) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (e.detail.value['verificationCode'].length != 4) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				if (e.detail.value['userPassword'].length == 0) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				}
				if (e.detail.value['userPassword'] != e.detail.value['userPasswordAgain']) {
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					})
					return
				}
				if (this.submit_loading) {
					return
				}
				let obj = {}
				obj['userPhone'] = e.detail.value['userPhone']
				obj['userPassword'] = e.detail.value['userPassword']
				obj['verificationCode'] = e.detail.value['verificationCode']
				this.submit_loading = true
				resetPassword(obj).then((res) => {
					this.submit_loading = false
					if (res.data.code == 0) {
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						})
						setTimeout(function() {
							uni.reLaunch({
								url: '/pages/login/index'
							})
						}, 2000);
					} else {
						uni.showToast({
							title: res.data.errMsg,
							icon: 'none'
						})
					}
				})
			},
			phone_change(e) {
				this.userPhone = e.detail.value
			},
			get_code() {
				this.time_show = 5
				this.create_time()
				let obj = {}
				obj['userPhone'] = this.userPhone
				getVerificationCode(obj).then((res) => {
					this.submit_loading = false
					if (res.data.code == 0) {
						uni.showToast({
							title: '发送成功',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.data.errMsg,
							icon: 'none'
						})
					}
				})
			},
			create_time() {
				let that = this;
				this.time_count_down = setInterval(() => {
					if (that.time_show > 0) {
						that.time_show--
					} else {
						clearInterval(that.time_count_down)
					}
				}, 1000)
			},
			show_status() {
				this.show_type = this.show_type == 1 ? 0 : 1
			},
			input_focus(index) {
				this.focus = index
			},
			check_phone(phone) {
				let reg = new RegExp("^[1][3,4,5,7,8][0-9]{9}$");
				return reg.test(phone)
			},
			goBack() { //返回上一层
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	.form_content:hover {
		border-bottom: 1rpx solid #75AAFF;
	}

	.code {
		font-size: 32rpx;
		text-align: center;
		color: #3B86FF;
		width: 200rpx;
		line-height: 75rpx;
		height: 75rpx;
	}

	.form_image {
		width: 32rpx;
		height: 32rpx;
		margin-top: 20rpx;
	}

	.placeholder {
		color: #A1A0AE;
	}

	.form_name {
		width: 148rpx;
		font-size: 32rpx;
		height: 75rpx;
		line-height: 75rpx;
		color: #43425D;
	}

	.form_input {
		line-height: 75rpx;
		height: 75rpx;
		margin-left: 20rpx;
		width: 450rpx;
		font-size: 32rpx;
	}

	.area_line {
		width: 2rpx;
		height: 24rpx;
		margin-left: 24rpx;
		margin-top: 15px;
	}

	.input_phone {
		overflow: inherit;
		line-height: 72rpx;
		height: 72rpx;
		margin-left: 44rpx;
		width: 400rpx;
		font-size: 32rpx;
	}

	.area {
		line-height: 72rpx;
		height: 72rpx;
		font-size: 32rpx;
		color: #43425D;
	}

	.form_content {
		display: flex;
		color: #43425D;
		border-bottom: 1rpx solid #D2D1DF;
		font-size: 32rpx;
		margin-bottom: 80rpx;
	}

	.form {
		padding: 0 50rpx;
		padding-top: 120rpx;
	}

	.submit {
		width: 650rpx;
		height: 104rpx;
		line-height: 104rpx;
		border-radius: 8rpx;
		background: linear-gradient(118deg, #61A4FC 0%, #3B86FF 100%);
		margin: 0 auto;
		text-align: center;
		color: #fff;
		margin-top: 170rpx;
		box-shadow: 0rpx 12rpx 30rpx rgba(116, 169, 255, 0.55);
	}

	.top {
		padding-left: 62rpx;
		padding-top: 230rpx;
	}

	.title_text {
		font-size: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: #333;
		padding-left: 18rpx;
		display: inline-block;
	}

	.title_ico {
		width: 18rpx;
		height: 26rpx;
		margin-top: 23rpx;
	}

	.phone_ico {
		width: 11rpx;
		height: 11rpx;
		margin-left: 2rpx;
		margin-top: 47rpx;
	}
</style>
